導(dǎo)讀:A5創(chuàng)業(yè)項(xiàng)目春季招商 好項(xiàng)目招代理無(wú)憂(yōu)最近,波紋曲線在網(wǎng)頁(yè)設(shè)計(jì)中出現(xiàn)得越來(lái)越頻繁。相對(duì)于硬朗的直線而言,波紋曲線更加柔和,能讓頁(yè)面顯得更加輕盈,還可以靈活地同其他各種風(fēng)格
發(fā)表日期:2019-12-10
文章編輯:興田科技
瀏覽次數(shù):10243
標(biāo)簽:
A5創(chuàng)業(yè)項(xiàng)目春季招商 好項(xiàng)目招代理無(wú)憂(yōu)
最近,波紋曲線在網(wǎng)頁(yè)設(shè)計(jì)中出現(xiàn)得越來(lái)越頻繁。相對(duì)于硬朗的直線而言,波紋曲線更加柔和,能讓頁(yè)面顯得更加輕盈,還可以靈活地同其他各種風(fēng)格的元素搭配,有助于協(xié)調(diào)網(wǎng)站的整體美感。也因此,波紋曲線的使用方法很是多樣,能夠搭建出多種風(fēng)格的網(wǎng)站。今天我們就一起來(lái)看看波紋曲線在網(wǎng)站中有哪些作用以及對(duì)應(yīng)的具體實(shí)例吧!
1. 增加設(shè)計(jì)特色
應(yīng)用矩形和直線的網(wǎng)站實(shí)在是太多了,而且有時(shí)網(wǎng)站設(shè)計(jì)中的某些情感是矩形和直線難以表達(dá)的,這時(shí)柔和的曲線就派上用場(chǎng)了,它的使用可以給網(wǎng)站增色不少。下圖是 The papillons de Nuit festival 網(wǎng)站的主頁(yè)。雖然淺色的主頁(yè)背景上使用了很多曲線元素,但在具體細(xì)節(jié)方面各有不同,很好的突出了活動(dòng)主題。頁(yè)面左上角的曲線是動(dòng)態(tài)效果的,中間的"Zapping"元素中使用了多條細(xì)長(zhǎng)的波浪曲線,而右下角的曲線則是用來(lái)引導(dǎo)用戶(hù)前往社交鏈接網(wǎng)站。當(dāng)你滾動(dòng)頁(yè)面時(shí),這還會(huì)出現(xiàn)更多的波浪曲線,將照片與表演者一一對(duì)應(yīng)起來(lái)。
確實(shí),對(duì)于商城網(wǎng)站或金融機(jī)構(gòu)網(wǎng)站來(lái)說(shuō),這種波紋曲線元素的設(shè)計(jì)可能顯得隨意。但對(duì)于活動(dòng)主題或時(shí)尚網(wǎng)站來(lái)說(shuō),波紋曲線絕對(duì)最能調(diào)動(dòng)氣氛,讓整個(gè)設(shè)計(jì)趣味十足,引人入勝,帶來(lái)不少網(wǎng)站流量。
2. 設(shè)計(jì)引人注意的CTA按鈕
就目前而言,極簡(jiǎn)主義和扁平化設(shè)計(jì)仍是網(wǎng)頁(yè)設(shè)計(jì)的主潮流,而波紋曲線與這兩者有著天生的契合,可以用在網(wǎng)站中引起用戶(hù)對(duì)于特定區(qū)域的注意。這也是為什么不少網(wǎng)站使用波紋曲線讓CTA按鈕更突出??赡苣銜?huì)覺(jué)得使用箭頭或三角形元素可以達(dá)到同樣的目的,其實(shí)不然。波紋元素與前者相比有一點(diǎn)細(xì)微的不同,那就是它足夠柔和,它在引起用戶(hù)注意的同時(shí)不會(huì)讓用戶(hù)產(chǎn)生被壓迫去做某事的感覺(jué)。
Recruitz就在網(wǎng)站首頁(yè)的下邊緣中使用波紋曲線將CTA按鈕和網(wǎng)站證書(shū)榮譽(yù)區(qū)別開(kāi)來(lái),這種輕柔的分割有助于用戶(hù)來(lái)回瀏覽,自然而然注意到CTA按鈕。多層的波紋曲線還讓網(wǎng)頁(yè)有了層次,整個(gè)設(shè)計(jì)不會(huì)顯得平淡無(wú)奇。當(dāng)然,下圖中CTA按鈕能吸引用戶(hù)駐足,也要得益于明亮的漸變橙色的應(yīng)用。
3. 波浪曲線和插畫(huà)
盡管波浪曲線可以獨(dú)立存在,用在背景中創(chuàng)造一些有趣的效果(比如上面兩個(gè)網(wǎng)站),但它的應(yīng)用場(chǎng)景可不僅于此,它還可以與插畫(huà)結(jié)合使用。現(xiàn)在很多網(wǎng)站中使用的插畫(huà)都采用扁平化設(shè)計(jì),棱角分明,直線非常多,而在插畫(huà)中加入波紋曲線可以起到柔和視覺(jué)的作用,更容易吸引用戶(hù)的視線。
Retrace Health網(wǎng)站在首頁(yè)插畫(huà)的天空中加入了一道柔和的曲線,這讓整個(gè)插畫(huà)出現(xiàn)了層次,上方的空白區(qū)域不再單調(diào),但卻依舊保證了留白的效果。網(wǎng)站的整個(gè)視覺(jué)體驗(yàn)得到提升,可見(jiàn)這微妙的改變恰到好處。
4. 平衡硬朗的直線
前面我們也說(shuō)過(guò)波紋曲線可以同各種元素搭配使用,起協(xié)調(diào)、中和的作用。如果你的網(wǎng)站線條太分明了,需要一些元素來(lái)平衡,這時(shí)不妨考慮考慮波紋曲線。
Ghafari這個(gè)網(wǎng)站就巧妙的運(yùn)用了波紋曲線來(lái)協(xié)調(diào)整個(gè)網(wǎng)站。網(wǎng)站的首頁(yè)被硬朗的直線劃分為左右兩半,不過(guò)這種劃分看上去沒(méi)有那么生硬。這很大程度上都要?dú)w功于網(wǎng)頁(yè)上的波紋曲線。這些波紋曲線很是隱蔽,你需要仔細(xì)觀察:左邊淺灰色的曲線,以及右邊圖片底部綠色草地構(gòu)成的曲線。雖然這些元素看上去很簡(jiǎn)單,卻能改善網(wǎng)站的呈現(xiàn)效果,給用戶(hù)帶來(lái)不錯(cuò)的體驗(yàn)。這種設(shè)計(jì)技巧也比較容易學(xué)習(xí),我們可以恰當(dāng)?shù)貙⑺w移到自己的設(shè)計(jì)中。
5. 實(shí)現(xiàn)分層或卡片式效果
并不是只有棱角分明的矩形、圓形才能創(chuàng)造出分層或卡片式的效果,波紋曲線同樣也可以實(shí)現(xiàn)。除此以外,柔和的波紋曲線還有一個(gè)優(yōu)點(diǎn),那就是讓分層或卡片式效果顯得沒(méi)有那么刻板、公式化。為了實(shí)現(xiàn)這一效果,波紋曲線常常需要和漸變色一起搭配使用。
Algolia這個(gè)網(wǎng)站就是一個(gè)經(jīng)典栗子,它用曲線創(chuàng)造出分層的效果,結(jié)合曲線和漸變讓網(wǎng)站更協(xié)調(diào)、有趣。盡管這個(gè)網(wǎng)站上使用了許多漸變色、直線和曲線,它卻完全沒(méi)有給用戶(hù)的瀏覽閱讀造成負(fù)擔(dān),它是簡(jiǎn)單、易懂的。
6.創(chuàng)建動(dòng)畫(huà)效果
當(dāng)人們提到波紋或波浪時(shí),常會(huì)聯(lián)想到大海。這種自然的關(guān)聯(lián)反饋到設(shè)計(jì)當(dāng)中,也就成了我們今天所看到的波紋動(dòng)態(tài)效果。仔細(xì)想想,波紋曲線和動(dòng)效的結(jié)合其實(shí)是很自然的。波紋動(dòng)效常會(huì)模仿海浪的節(jié)奏和韻律,營(yíng)造舒緩和諧的氛圍。
Relativity of Time這個(gè)網(wǎng)站就是這樣設(shè)計(jì)的,背景中流動(dòng)的曲線波紋,和網(wǎng)站內(nèi)容沒(méi)有多大關(guān)系,但是卻足以營(yíng)造出平靜而自然的用戶(hù)體驗(yàn)。
從上面的一些具體實(shí)例中,我們可以看出波紋曲線有平衡設(shè)計(jì)、調(diào)節(jié)氛圍、傳遞情感等作用,能讓網(wǎng)站在視覺(jué)上更顯柔和??梢哉f(shuō),在大多數(shù)網(wǎng)站設(shè)計(jì)項(xiàng)目中,波紋曲線都有用武之地。當(dāng)然,在網(wǎng)站中使用什么樣的設(shè)計(jì)元素最主要還是要根據(jù)自己網(wǎng)站的行業(yè)特征、目標(biāo)受眾的喜好等來(lái)確定,千萬(wàn)不要一昧的追逐設(shè)計(jì)潮流趨勢(shì)。你對(duì)波紋曲線有什么看法和理解呢?歡迎大家踴躍留言!快來(lái)起飛頁(yè)自助建站平臺(tái)(http://www.qifeiye.com/?t_wd=a5)搭建一個(gè)響應(yīng)式網(wǎng)站吧!
<script>document.writeln('更多新聞
2019
隨著微信、微博、App等新媒體的迅速發(fā)展,融合圖文與音樂(lè)的H5微場(chǎng)景展示,給網(wǎng)友帶來(lái)了全新的閱讀體驗(yàn),更具傳播感染力。H5豐富的表現(xiàn)力,也成為了企業(yè)營(yíng)銷(xiāo)宣傳,個(gè)人發(fā)送問(wèn)候祝福的
View details
2020
關(guān)于網(wǎng)站建設(shè),下面小編告訴大家怎樣來(lái)提高網(wǎng)站建設(shè)的權(quán)重? 1標(biāo)題:確保網(wǎng)站每一個(gè)標(biāo)題的唯一性也是網(wǎng)站優(yōu)化者必須注重的,只有唯一性才能給你的網(wǎng)站帶來(lái)
View details
2020
關(guān)于網(wǎng)站建設(shè),很多中小企業(yè)已經(jīng)意識(shí)到建設(shè)網(wǎng)站對(duì)企業(yè)推廣的重要性,少部分企業(yè)進(jìn)行了相關(guān)的優(yōu)化,讓企業(yè)的產(chǎn)品或者能夠提供的服務(wù)在搜索引擎上得到較好的
View details
2019
寫(xiě)在前面:準(zhǔn)備材料:手機(jī)號(hào),郵箱,手持照,輔助材料(非必選項(xiàng)),邀請(qǐng)碼(非必選項(xiàng))。輔助材料萬(wàn)能公式:方法①新浪博客16級(jí)博客發(fā)8篇相關(guān)的文章,昵稱(chēng)、描述、頭像都與所注冊(cè)自媒體號(hào)對(duì)應(yīng),
View details